<template>
 <el-dialog
      custom-class='dialogSel'
			
	  :visible.sync="showPeo"	
	  lock-scroll
    > 
      <span slot="title" class="dialog-title">
         	选择人
      </span>

      

      <el-row class="body" justify='space-between'>
        
        <el-col class="body-left" :span='12'>
            <el-row>
              <el-col :span='22'>
                <el-input
					 icon="search"
					 class="input" placeholder="搜索 拼音 名字 编号"
					 v-model='shenpiInput'
					 @keyup.enter.native='shenpiSearch'
					 :on-icon-click="shenpiSearch">
				</el-input>
              </el-col>
            </el-row>

					
						<section class="mianbao">

							<el-tooltip popper-class='tooltip2' :content="getCcList2 && getCcList2.fristDept.descr" placement="top">
							  <p :style='mianbaoShowIf("b")?"":"overflow:visible"' @click.stop='sendBumenAjax2(getCcList2 && getCcList2.fristDept)'>{{getCcList2 && getCcList2.fristDept.descr}}</p>
							</el-tooltip>

			              <span v-if='mianbaoShowIf("b")' class="el-icon-arrow-right"></span>
			              <el-tooltip v-if='mianbaoShowIf("b")' popper-class='tooltip2' :content="getCcList2 && getCcList2.checkDept.descr" placement="top">
									  	<p>{{getCcList2 && getCcList2.checkDept.descr}}</p>
			              </el-tooltip>	
							
						</section>

			
						<section class="bumen" v-if='getCcList2 && getCcList2.deptList.length'>
							<p v-for='(k,i) in getCcList2.deptList' @click.stop='sendSecondBumenAjax2(k)' >
								<span>{{k.descr}}</span>
								<span class="el-icon-arrow-right" ></span>
							</p>
						</section>

						<section class="checkbox" v-if='getCcList2'>
							<!--<el-checkbox-group v-model.lazy='form.shenpiSelect' >
								<p v-for='(k,i) in getCcList2.empList' :key='i' style="padding:0">
									<el-checkbox  :label='k.emplid'>{{k.name}}</el-checkbox>
								</p>
							</el-checkbox-group> -->

							  <el-radio-group v-model="form.shenpiSelect" @change="changeShenpi">

							    <p v-for='(k,i) in getCcList2.empList' :key='i' style="padding:0">
								    <el-radio :label='k.emplid'>{{k.name}}</el-radio>
								</p>
							  </el-radio-group>
						</section>
						<!--<section class="checkbox" v-if='getCcList2'>
							<el-checkbox-group v-model.lazy='form.shenpiSelectDan' >
								<p v-for='(k,i) in getCcList2.empList' :key='i' style="padding:0">
									<el-checkbox  :label='k.emplid'>{{k.name}}</el-checkbox>
								</p>
							</el-checkbox-group>

						</section>-->

       
        </el-col>

        <el-col class="body-right" :span='12'>
          <el-row class="body-right-title" tag='h2'>
           		 已选择审批人
          </el-row> 
         <el-row class="body-right-content" v-for='(k,i) in shenpiRenSave' :key='i'>
           <el-row style='margin-top:4px;line-height:32px;'><el-col :span="20">{{k.name}}<span>({{k.emplid}})</span></el-col></el-row>
         </el-row>
     
        </el-col>
        
      </el-row>

      <div class="dialog-footer">
        <el-button @click.stop="confirmSel" type="primary">确 定</el-button>
        <el-button @click.stop = "concelSel">取 消</el-button>
      </div>

</el-dialog>


</template>


<script>


import Vue from "vue";
import {
  RadioGroup,
  Radio,
  DatePicker,
  Message,
  Tooltip,
  MessageBox,
  Pagination,
  Col,
  Row,
  Select,
  Option,
  Upload,
  Dialog,
  Tree,
  CheckboxGroup,
  Checkbox
} from "element-ui";
Vue.use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(DatePicker);
Vue.use(Col);
Vue.use(Row);
Vue.use(Select);
Vue.use(Option);
Vue.use(Upload);
Vue.use(Dialog);
Vue.use(Tree);
Vue.use(Pagination);
Vue.use(Radio);
Vue.use(Tooltip);
Vue.use(RadioGroup);


export default {
  components: {

  },
  data () {

    return {

	  form:{
	  	shenpiSelect:null,
	  },
      getCcList: null,
      getCcList2: null,
      zhihuirenSelect: [],
      oldZhihuiren: [],
      oldShenpi: [],
      shenpiInput: null,
      fileList: [],
      myFileList: [],
      zhihuiInput: null,

      aTypeSelect: [],
      asyncFlag:true,

      shenpiRenSave:[],
      shenpiSelectSave:[],
      
      isDanXuan:true,
      
      dialogVisible:true
    };
  },
  watch: {

  },
  props:['showPeo','resultPeo'],
  
  created:function(){
  		var arr = []
  		if (this.resultPeo && this.resultPeo.length>0) {
  			this.shenpiRenSave = JSON.parse(JSON.stringify(this.resultPeo));
  			this.form.shenpiSelect = this.shenpiRenSave[0].emplid;
  		}
  	       
  },
  
  mounted () {

    this.getShenpiData();
    this.getZhihuirenData();

  },
  computed: {

 

     shenpi_com () {



	  	if (this.isDanXuan) {
	        const list = this.getCcList2.empList
	        if (this.form.shenpiSelect.length) {
	          
				this.shenpiRenSave = [];
                list.forEach((ele,index) => {

                  if (this.form.shenpiSelect.includes(ele.emplid) ) {
                      var isExist = false;
                      this.shenpiRenSave.forEach((eles)=>{
                          if (eles.emplid === ele.emplid) {
                              isExist = true;
                          }
                          
                      })
                      if (!isExist) {
                          this.shenpiRenSave.push(ele);
                      }

                  }
                })
	          

	
	        } else {
	          this.shenpiSelectSave = [];
	          this.shenpiRenSave = [];
	        }	
	        return this.shenpiRenSave
	  	}


      if (this.getCcList2) {

        const list = this.getCcList2.empList
        if (this.form.shenpiSelect.length) {
          
          if (this.shenpiSelectSave.length < this.form.shenpiSelect.length) {
                list.forEach((ele,index) => {

                  if (this.form.shenpiSelect.includes(ele.emplid) ) {
                      var isExist = false;
                      this.shenpiRenSave.forEach((eles)=>{
                          if (eles.emplid === ele.emplid) {
                              isExist = true;
                          }
                          
                      })
                      if (!isExist) {
                          this.shenpiRenSave.push(ele);
                      }
                        
                      // result.push({ name: ele.name, emplid: ele.emplid })
                  }
                })
          } else {
              var result = [];
              console.log(this.form.shenpiSelect,'this.form.shenpiSelect');
              this.form.shenpiSelect.forEach((ele)=>{
                    var isExist = false;
                    this.shenpiRenSave.forEach((eles)=>{
                        if (eles.emplid === ele) {
                            result.push(eles)
                        }
                        
                    })                  
              })
              this.shenpiRenSave = result;
          }



          this.shenpiSelectSave = JSON.parse(JSON.stringify(this.form.shenpiSelect));

        } else {
          this.shenpiSelectSave = [];
          this.shenpiRenSave = [];
        }
      }

      return this.shenpiRenSave
    },
   

  },

  filters: {

  },
  methods: {
  	
  	changeShenpi:function(val){
		
		console.log(val,'val');
        const list = this.getCcList2.empList
        if (this.form.shenpiSelect.length) {
          
			this.shenpiRenSave = [];
            list.forEach((ele,index) => {

              if (this.form.shenpiSelect.includes(ele.emplid) ) {
                  var isExist = false;
                  this.shenpiRenSave.forEach((eles)=>{
                      if (eles.emplid === ele.emplid) {
                          isExist = true;
                      }
                      
                  })
                  if (!isExist) {
                      this.shenpiRenSave.push(ele);
                  }

              }
            })
          


        } else {
          this.shenpiSelectSave = [];
          this.shenpiRenSave = [];
        }	
        console.log(this.shenpiRenSave,'this.shenpiRenSave');
  	},
  	

    deleteCheckedItem(i){
      this.shenpiRenSave.splice(i,1)
      var result = [];
      this.shenpiRenSave.forEach((ele)=>{
          result.push(ele.emplid);
          
      })
      this.form.shenpiSelect = result;
      
    },

    mianbaoShowIf (type) {
      if (type == "a") {
        if (this.getCcList) {
          if (
            this.getCcList.fristDept.descr !== this.getCcList.checkDept.descr
          ) {
            return true;
          }
        }
        return false;
      } else {
        if (this.getCcList2) {
          if (
            this.getCcList2.fristDept.descr !== this.getCcList2.checkDept.descr
          ) {
            return true;
          }
        }
        return false;
      }
    },




    closeShenpi () {
      this.form.shenpiSelect = this.oldShenpi;
      this.dialog2Visiable = false;
    },

    closeZhihuiren () {
      this.zhihuirenSelect = this.oldZhihuiren;
      this.dialogVisiable = false;
    },

    zhihuiSearch () {
      if (!this.zhihuiInput) {
        this.getZhihuirenData();
      } else {
        let params = {
          search: this.zhihuiInput,
          setid: this.getCcList.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            let result = []

            list.forEach((ele) => {
              result.push({ emplid: ele.emplid, name: ele.name })
            })
            this.getCcList.checkDept.descr = "搜索结果";
            this.getCcList.deptList = [];
            this.getCcList.empList = result;
          } else {
            Message({
              message: "查无此人,请调整关键字,重新搜索",
              type: "error"
            });
          }
        });
      }
    },

    shenpiSearch () {
      if (!this.shenpiInput) {
        this.getShenpiData();
      } else {
        let params = {
          search: this.shenpiInput,
          setid: this.getCcList2.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            this.getCcList2.checkDept.descr = "搜索结果";
            this.getCcList2.deptList = [];
            this.getCcList2.empList = list;
          } else {
            Message({
              message: "查无此人,请调整关键字,重新搜索",
              type: "error"
            });
          }
        });
      }
    },




    sendSecondBumenAjax (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    sendBumenAjax (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    sendSecondBumenAjax2 (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          empList: getCcList.empList,
          checkDept: getCcList.checkDept
        } = data);
      });
    },

    sendBumenAjax2 (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    getZhihuirenData () {
      this.Axios
        .Post(this.URL.getCcList.url)
        .then(res => (this.getCcList = res.data.datas));
    },
    getShenpiData () {
      this.Axios
        .Post(this.URL.getCcList.url)
        .then(res => {

          this.getCcList2 = res.data.datas
          let result = []

          this.getCcList2.empList.forEach(ele => {
            result.push({ name: ele.name, emplid: ele.emplid })
          })

          this.getCcList2.empList = result

        });
    },


    
    handleIconClick () {
      let params = {
        name: this.shenheInput
      };

      this.Axios.Post(this.URL.leaveApprovalBylist.url, params).then(res => {
        this.shenpi = res.data.datas;
      });
    },
    
    confirmSel:function(){
        var result = JSON.parse(JSON.stringify(this.shenpiRenSave))
    	this.$emit('update:resultPeo',result);
    	Vue.nextTick(()=>{
    		this.$emit('update:showPeo',false);
    	})
    },
    concelSel:function(){
    	this.$emit('update:showPeo',false);
    }
  }
};
</script>



<style lang='less' scoped>

.dialogSel {

  .mianbao{
  	   padding: 14px 0 14px 14px;
	   &::after {
	    content: '';
	    position: absolute;
	    left: -6px;
	    bottom: 6px;
	    height: 1px;
	    width: 95%;
	    background: #f1f1f1;
	  }
	  &::before {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 50%;
	    width: 3px;
	    height: 14px;
	    transform: translateY(-50%);
	    background: #38f;
	  }
  }

  .shenheren,
  .zhihuiren {
    > ul {
      max-width: 600px;
      zoom: 1;
      &::after {
        content: '';
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
      }
      li:last-of-type {
        margin-right: 0;
      }
      li {
        float: left;
        position: relative;
        margin-right: 60px;
        .blue {
          background-color: #38f;
        }
        > div {
          background-color: #c0c0c0;
          height: 50px;
          width: 50px;
          line-height: 50px;
          border-radius: 50%;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
        > span {
          color: #c0c0c0;
          position: absolute;
          left: 120%;
          top: 0;
          font-size: 35px;
          font-weight: 900;
        }

        > p {
          text-align: center;
        }
      }
    }
  }
  
 .dialog{
    span:last-of-type {
      color: #999;
      transform: scale(0.7);
      float: right;
      margin-top: 4px;
    }
   
 }


}
</style>
<style lang='less'>	
.dialogSel {
	p.el-tooltip{
		width:45%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display:inline-block;
		line-height:40px;	
	}
	p.el-tooltip:first-child{
		margin-right:6%;
	}
	section.mianbao {
		position:relative;
		margin-bottom:1px solid #f1f1f1;
	}
	.mianbao span.el-icon-arrow-right{
		position:absolute;
	    top: 27px;
		left:46%;
		width:6%;
		text-align:center;
	}
	
	section.checkbox p {
		line-height:30px;
	}
	section.checkbox{
	    max-height: 400px;
	    overflow-y: auto;
	}
	
	.dialog-footer {
	    position: relative;
		text-align:right;
		margin-top:80px;
		

	}
	
    .bumen {
      width: 92%;

      & > p {
        padding: 8px 4px;
        cursor: pointer;
        span:first-of-type {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          max-width: 210px;
          display: inline-block;
        }
        span:last-of-type {
          color: #999;
          float: right;

        }
      }
    }
}

</style>